<html>
    <head>
        <title>用电参数</title>
        <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
        <link rel="stylesheet" href="../../../style.css">

        <style>
            body{
                background: #F0F2F6;
            }


            .main-head{
                background: #fff;
                padding-left: 10px;
                padding-top: 10px;
                margin-bottom: 0px;
                border: solid 1px #fff;
            }

            .chart-outer{
                height: 200px;
            }




        </style>
    </head>
    <body>
        <div class="page" id="page-monitor">

            <div class="page-title"> 用电参数</div>
            <div class="page-main">
                <el-row>
                    <el-col :span="4">
                        <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'d'"  :zonetype="3"></dev-tree>
                    </el-col>
                    <el-col :span="20">
                        <div class="main-head">
                            <el-form :inline="true">
                                <el-form-item label="">
                                    <el-date-picker type="date" v-model="day" placeholder="日期" style="width: 150px;" value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>

                                <el-form-item>
                                    <el-tooltip effect="dark" content="请点击左边树中设备" v-model="tooltip" placement="right">
                                        <el-button type="primary" @click="search">查询</el-button>
                                    </el-tooltip>
                                </el-form-item>
                            </el-form>
                        </div>

                        <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                            <el-tab-pane label="电流" name="eleI">
                                <div class="chart-outer">
                                    <chart-elex v-bind:option="eleIOption"></chart-elex>
                                </div>

                                <!--
                                <el-table border stripe style="width: 100%" :data="eleITableData">
                                    <el-table-column prop="name" label="采集因子">
                                    </el-table-column>
                                    <el-table-column prop="max" label="最大值">
                                    </el-table-column>
                                    <el-table-column prop="maxTime" label="最大时间">
                                    </el-table-column>
                                    <el-table-column prop="minTime" label="最小值">
                                    </el-table-column>
                                    <el-table-column prop="avg" label="平均值">
                                    </el-table-column>
                                </el-table>
                                -->
                            </el-tab-pane>
                            <el-tab-pane label="电压" name="eleU">
                                <div class="chart-outer">
                                    <chart-elex v-bind:option="eleUOption"></chart-elex>
                                </div>
                                <!--
                                <el-table border stripe style="width: 100%" :data="eleITableData">
                                    <el-table-column prop="name" label="采集因子">
                                    </el-table-column>
                                    <el-table-column prop="max" label="最大值">
                                    </el-table-column>
                                    <el-table-column prop="maxTime" label="最大时间">
                                    </el-table-column>
                                    <el-table-column prop="minTime" label="最小值">
                                    </el-table-column>
                                    <el-table-column prop="avg" label="平均值">
                                    </el-table-column>
                                </el-table>
                                -->
                            </el-tab-pane>
                            <el-tab-pane label="负荷" name="eleL">
                                    <div class="chart-outer">
                                            <chart-line v-bind:data="eleLOption"></chart-line>
                                        </div>
                            </el-tab-pane>
                            <el-tab-pane label="功率因数" name="eleP">
                                    <div class="chart-outer">
                                            <chart-line v-bind:data="elePOption"></chart-line>
                                        </div>
                            </el-tab-pane>
                            <el-tab-pane label="谐波" name="eleH">
                                    <div class="chart-outer">
                                        <chart-line v-bind:data="eleHOption"></chart-line>
                                        <!--
                                        <chart-pie v-bind:data="eleHOption"></chart-pie>
                                        -->

                                    </div>
                            </el-tab-pane>
                            <el-tab-pane label="温度" name="eleT">
                                    <div class="chart-outer">
                                            <chart-line v-bind:data="eleTOption"></chart-line>

                                        </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-col>
                </el-row>
            </div>


        </div>


        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

        <script>

            var vuePage=new Vue({
                el:'#page-monitor',
                data:{
                    tooltip:false,
                    day:'',
                    eleIOption:{},
                    eleUOption:{},
                    eleLOption:{},
                    elePOption:{},
                    eleHOption:{},
                    eleTOption:{},
                    tabName:'eleI',
                    eleITableData:[],
                    expandId:0,
                    orginData:[],
                    currTabName:''
                },
                methods:{
                    search:function(){

                    },
                    onTreeNode:function(data){
                        //alert( JSON.stringify(data) );
                        if(data.id.indexOf('D')==-1){
                            return;
                        }
                        var id = data.attributes.deviceId;
                        this.loadEnergyParam(id);
                    },

                    refreshEleI:function(){
                        var xdatas=[],adatas=[],bdatas=[],cdatas=[];
                        for(var i=0;i<this.orginData.length;i++){
                            xdatas.push(this.orginData[i].attributes.dd_hour);
                            adatas.push(this.orginData[i].field16);
                            bdatas.push(this.orginData[i].field17);
                            cdatas.push(this.orginData[i].field18);
                        }
                        this.eleIOption={
                            legend:{
                                data:['A相','B相','C相']
                            },
                            series:[
                                {
                                    name:'A相',
                                    type:'line',
                                    data:adatas
                                },
                                {
                                    name:'B相',
                                    type:'line',
                                    data:bdatas
                                },
                                {
                                    name:'C相',
                                    type:'line',
                                    data:cdatas
                                }
                            ],
                            xAxis:[
                                {
                                    type : 'category',
                                    data:xdatas
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    name:'单位(A)'
                                }
                            ],
                        };
                    },

                    refreshEleU:function(){
                        var xdatas=[],adatas=[],bdatas=[],cdatas=[];
                        for(var i=0;i<this.orginData.length;i++){
                            xdatas.push(this.orginData[i].attributes.dd_hour);
                            adatas.push(this.orginData[i].field13);
                            bdatas.push(this.orginData[i].field14);
                            cdatas.push(this.orginData[i].field15);
                        }
                        this.eleUOption={
                            legend:{
                                data:['A相','B相','C相']
                            },
                            series:[
                                {
                                    name:'A相',
                                    type:'line',
                                    data:adatas
                                },
                                {
                                    name:'B相',
                                    type:'line',
                                    data:bdatas
                                },
                                {
                                    name:'C相',
                                    type:'line',
                                    data:cdatas
                                }
                            ],
                            xAxis:[
                                {
                                    type : 'category',
                                    data:xdatas
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value',
                                    name:'单位(V)'
                                }
                            ],
                        };
                    },

                    refreshEleL:function(){


                        var xdatas=[],ydatas=[];
                        for(var i=0;i<this.orginData.length;i++){
                            xdatas.push(this.orginData[i].attributes.dd_hour);
                            ydatas.push(this.orginData[i].field12);
                        }


                        this.eleLOption={
                            title:'负荷(kW)',
                            x:xdatas,
                            y:[
                                {name:'',value:ydatas},
                            ]
                        };
                    },

                    refreshEleP:function(){

                        var xdatas=[],ps=[];
                        for(var i=0;i<this.orginData.length;i++){
                            xdatas.push(this.orginData[i].attributes.dd_hour);
                            ps.push(this.orginData[i].field19);
                        }


                        this.elePOption={
                            title:'功率因数(kW)',
                            x:xdatas,
                            y:[
                                {name:'PFSum',value:ps}
                            ]
                        };
                    },

                    refreshEleH:function(){

                        var xdatas=[],uas=[],ubs=[],ucs=[],ias=[],ibs=[],ics=[];
                        for(var i=0;i<this.orginData.length;i++){
                            xdatas.push(this.orginData[i].attributes.dd_hour);
                            uas.push(this.orginData[i].field32);
                            ubs.push(this.orginData[i].field33);
                            ucs.push(this.orginData[i].field34);
                            ias.push(this.orginData[i].field35);
                            ibs.push(this.orginData[i].field36);
                            ics.push(this.orginData[i].field37);
                        }


                        this.eleHOption={
                            title:'谐波',
                            x:xdatas,
                            y:[
                                {name:'UA',value:uas},
                                {name:'UB',value:ubs},
                                {name:'UC',value:ucs},
                                {name:'IA',value:uas},
                                {name:'IB',value:ubs},
                                {name:'IC',value:ucs}
                            ]
                        };
                    },

                    refreshEleT:function() {

                        var xdatas = [], ts = [];
                        for (var i = 0; i < this.orginData.length; i++) {
                            xdatas.push(this.orginData[i].attributes.dd_hour);
                            ts.push(this.orginData[i].field20);
                        }


                        this.eleTOption = {
                            title: '温度(℃)',
                            x: xdatas,
                            y: [
                                { name: '', value: ts },
                            ]
                        };
                    },

                    refreshTabChart:function(tabName){
                        switch(tabName){
                            case 'eleI':
                                this.refreshEleI();
                            break;
                            case 'eleU':
                                this.refreshEleU();
                            break;
                            case 'eleL':
                                this.refreshEleL();
                            break;
                            case 'eleP':
                                this.refreshEleP();
                            break;
                            case 'eleH':
                                this.refreshEleH();
                            break;
                            case 'eleT':
                                this.refreshEleT();
                            break;
                            default:
                                this.refreshEleI();
                            break;
                        }
                    },
                    //加载能耗参数
                    loadEnergyParam:function(id){
                        var _self = this;
                        var dArr = this.day.split('-');
                        var param={
                            zoneIds:[id].join(','),
                            zoneType:3,
                            energyType:'Electric',
                            year:dArr[0]||0,
                            month:dArr[1]||0,
                            day:dArr[2]||0,
                            sumType:0,
                        };
                        HttpUtil.get('Analysis/getEnergyParam', param)
                            .success(function(data){
                            console.log('getEnergyParam',data);
                            _self.orginData = data.data;

                                        //_self.refreshEleI();
                                        _self.refreshTabChart(_self.currTabName);

                        });
                    },
                    onTabClick(tab, event){
                        this.currTabName = tab.name;
                        this.refreshTabChart(tab.name);

                    }

                },
                created:function(){

                    this.day = TimeUtil.convertToString(new Date()).substr(0,10);
                    this.expandId=6;


                    //AnalysisData.getEnergyParam()

                },
                mounted:function(){
                    this.tooltip = true;
                    setTimeout(() => {
                        var id = this.$refs["devTree"].getRootNode().id.substr(2);
                        this.loadEnergyParam(id);
                    }, 500);

                    /* 表格值
                    this.eleITableData=[{
                        name:'A相电流',
                        max:566,
                        maxTime:'2018-3-5 11:11:45',
                        min:34,
                        minTime:'2018-11-12 15:33:33',
                        avg:456
                    },{
                        name:'B相电流',
                        max:566,
                        maxTime:'2018-3-5 11:11:45',
                        min:34,
                        minTime:'2018-11-12 15:33:33',
                        avg:456
                    },{
                        name:'C相电流',
                        max:566,
                        maxTime:'2018-3-5 11:11:45',
                        min:34,
                        minTime:'2018-11-12 15:33:33',
                        avg:456
                    }];*/


                }
            });


        </script>

    </body>
</html>
